<template>
  <!-- 总体 -->
  <div class="container">
    <!-- 头部 -->
    <div class="home_top">
      <div class="home_top_left">
        <img src="@/assets/logo.png" alt="" width="36px" height="40px;" :class="isCollapse ? 'img_right' : ''" />
        &nbsp;&nbsp;<span v-show="!isCollapse">进销存</span>
      </div>
      <!-- 控制导航显示隐藏 -->
      <div class="home_dh">
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px; margin-top: 22px">
          <el-button class="collapsebut" :class="isCollapse ? 'dh_left' : 'dh_right'" @click="collapsefun"
            style="background-color: #1890ff; border: 0; font-size: 28px">
            <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
          </el-button>
        </el-radio-group>
      </div>
      <!-- 头部右侧 -->
      <div class="home_right">
        <div class="ccc" @click="ifsearch()">
          <i class="el-icon-search"></i>
        </div>
        <!-- 搜索框 -->
        <!-- 搜索框 -->
        <div v-if="search" class="home_search">
          <el-select v-model="value" filterable placeholder="搜索菜单" @change="searchjump">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="hy-gly">
          <el-dropdown>
            <span class="el-dropdown-link"> 欢迎您，管理员 </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-s-operation">切换部门</el-dropdown-item>
              <el-dropdown-item icon="el-icon-unlock">密码修改</el-dropdown-item>
              <el-dropdown-item icon="el-icon-setting">系统设置</el-dropdown-item>
              <el-dropdown-item icon="el-icon-refresh">清理缓存</el-dropdown-item>
              <el-dropdown-item icon="el-icon-s-home" divided @click.native="back()">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div>
          <p style="color: white; font-size: 14px; padding: 0 12px;">当前月度：2025-01</p>
        </div>
      </div>
    </div>
    <!-- 导航 -->

    <el-container style="height: 100%; border: 1px solid #eee">
      <el-aside :class="isCollapse ? 'aside_min' : 'aside_max'" style="width: 50; height: 100%">
        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
          :collapse="isCollapse" :default-active="this.$router.path" router>
          <el-menu-item index="home">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-film"></i>
              <span slot="title">库存管理</span>
            </template>
            <el-submenu index="2-1">
              <template slot="title">入库管理</template>
              <el-menu-item index="cgrk">采购入库</el-menu-item>
              <el-menu-item index="cgthck">采购退货出库(红入)</el-menu-item>
              <el-menu-item index="pyrk">盘盈入库</el-menu-item>
              <el-menu-item index="zdrk">涨吨入库</el-menu-item>
              <el-menu-item index="qtrk">其他入库</el-menu-item>
            </el-submenu>
            <el-submenu index="2-2">
              <template slot="title">出库管理</template>
              <el-menu-item index="xsck">销售出库</el-menu-item>
              <el-menu-item index="xsthrk">销售退货入库(红出)</el-menu-item>
              <el-menu-item index="pkck">盘亏出库</el-menu-item>
              <el-menu-item index="qtck">其他出库</el-menu-item>
            </el-submenu>
            <el-submenu index="2-3">
              <template slot="title">其他管理</template>
              <el-menu-item index="kctb">库存调拨</el-menu-item>
              <el-menu-item index="cbtz">成本调整</el-menu-item>
              <el-menu-item index="kcpd">库存盘点</el-menu-item>
            </el-submenu>
            <el-submenu index="2-4">
              <template slot="title">即时库存</template>
              <el-menu-item index="wlkc">物料库存</el-menu-item>
              <el-menu-item index="wlpckc">物料批次库存</el-menu-item>
              <el-menu-item index="ckwlkc">仓库物料库存</el-menu-item>
              <el-menu-item index="xxkc">详细库存</el-menu-item>
            </el-submenu>
            <el-submenu index="2-5">
              <template slot="title">出入库统计</template>
              <el-menu-item index="crkyhz">出入库月汇总</el-menu-item>
              <el-menu-item index="crkrhz">出入库日汇总</el-menu-item>
              <el-menu-item index="crkmx">出入库明细</el-menu-item>
            </el-submenu>
          </el-submenu>

          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-s-grid"></i>
              <span slot="title">基础数据</span>
            </template>
            <el-menu-item index="kh">客户</el-menu-item>
            <el-menu-item index="gys">供应商</el-menu-item>
            <el-menu-item index="ck">仓库</el-menu-item>
            <el-menu-item index="wlfl">物料分类</el-menu-item>
            <el-menu-item index="wl">物料</el-menu-item>
            <el-menu-item index="jldw">计量单位</el-menu-item>
            <el-menu-item index="bz">币种</el-menu-item>
            <el-menu-item index="yhzh">银行账户</el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span slot="title">发票登记</span>
            </template>
            <el-menu-item index="xsfp">销售发票</el-menu-item>
            <el-menu-item index="xsfphc">销售发票(红冲)</el-menu-item>
            <el-menu-item index="xsfpth">销售发票(退货)</el-menu-item>
            <el-menu-item index="cgfp">采购发票</el-menu-item>
            <el-menu-item index="cgfphc">采购发票(红冲)</el-menu-item>
            <el-menu-item index="cgfpth">采购发票(退货)</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 导航内容右侧编辑区 -->
      <el-container class="context_container">
        <div style="width: 100%; margin: 0 auto">
          <div class="container_top">
            <el-breadcrumb separator="" class="breadcrumb">
              <el-breadcrumb-item class="yiru" ref="aaa" v-for="(item, index) in breadList" :key="index"
                :to="{ path: item.path }" :class="{ 'current-breadcrumb': item.path === $route.path }">{{
                  item.meta.title }}
                <span class="delete-icon" @click.stop="removeBreadcrumb(index)"><i class="el-icon-close"></i></span>
              </el-breadcrumb-item>
            </el-breadcrumb>
            <el-button type="primary" @click="showDeleteAllPrompt">一键删除面包屑</el-button>

          </div>
          <div class="routerck">
            <router-view></router-view>
          </div>
        </div>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "ZjNavbar",
  data() {
    return {
      activeName: "second",
      isCollapse: true, // 导航显示隐藏
      breadList: [], // 路由集合
      showDeleteIcon: [], // 用于控制每个面包屑对应删除图标是否显示的数组，初始化为空数组
      search: false,  //搜索框显示隐藏
      options: [{
        value: 'analysis',
        label: '首页'
      }, {
        value: 'cgrk',
        label: '采购入库'
      }, {
        value: 'cgthck',
        label: '采购退货出库(红入)'
      }, {
        value: 'pyrk',
        label: '盘盈入库'
      }, {
        value: 'zdrk',
        label: '涨吨入库'
      }, {
        value: 'qtrk',
        label: '其他入库'
      }, {
        value: 'xsck',
        label: '销售出库'
      }, {
        value: 'xsthrk',
        label: '销售退货入库'
      }, {
        value: 'pkck',
        label: '盘亏出库'
      }, {
        value: 'qtck',
        label: '其他出库'
      }, {
        value: 'cktb',
        label: '库存调拨'
      }, {
        value: 'cbtz',
        label: '成本调整'
      }, {
        value: 'kcpd',
        label: '库存盘点'
      }, {
        value: 'wlkc',
        label: '物流库存'
      }, {
        value: 'wlpckc',
        label: '物流批次库存'
      }, {
        value: 'ckwlkc',
        label: '仓库物料库存'
      }, {
        value: 'xxkc',
        label: '详细库存'
      }, {
        value: 'crkyhz',
        label: '出入库月汇总'
      }, {
        value: 'crkrhz',
        label: '出入库日汇总'
      }, {
        value: 'crkmx',
        label: '出入库明细'
      }, {
        value: 'kh',
        label: '客户'
      }, {
        value: 'gys',
        label: '供应商'
      }, {
        value: 'ck',
        label: '仓库'
      }, {
        value: 'wlfl',
        label: '物料分类'
      }, {
        value: 'wl',
        label: '物料'
      }, {
        value: 'jldw',
        label: '计量单位'
      }, {
        value: 'bz',
        label: '币种'
      }, {
        value: 'yhzh',
        label: '银行账户'
      }, {
        value: 'xsfp',
        label: '销售发票'
      }, {
        value: 'xsfphc',
        label: '销售发票(红冲)'
      }, {
        value: 'xsfpth',
        label: '销售发票(退货)'
      }, {
        value: 'cgfp',
        label: '采购发票'
      }, {
        value: 'cgfphc',
        label: '采购发票(红冲)'
      }, {
        value: 'cgfpth(退货)',
        label: '采购发票'
      }],
      breadcrumbWidth: 0, // 用于记录面包屑总宽度
      containerWidth: 0, // 用于记录面包屑容器宽度
      value: ''
    };
  },

  methods: {

    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 控制展开与缩
    collapsefun() {
      this.isCollapse = !this.isCollapse;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 处理搜索框改变
    handleSearchChange(value) {
      this.navigateTo(value);
      this.search = false; // 关闭搜索框
    },
    // 搜索
    ifsearch() {
      this.search = true;
    },
    searchjump(value) {
      console.log(value)
      this.$router.push(value);
      this.search = false
    },
    back() {
      this.$confirm("即将退出系统, 是否继续?, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$router.push("/login");
          localStorage.removeItem("Token");
          this.$notify({
            title: "成功",
            message: "退出成功!",
            type: "success",
          });
        })
        .catch(() => {
          this.$notify({
            message: "已取消退出",
            type: "info",
          });
        });
    },
    isHome(route) {
      return route.name === "home";
    },

    updateBreadcrumb() {
      const container = document.querySelector('.container_top');
      if (container) {
        this.containerWidth = container.offsetWidth;
      }
      console.log(this.containerWidth, 3333);

      this.$nextTick(() => {
        const breadcrumbItems = document.querySelectorAll('.el-breadcrumb__item');
        let totalWidth = 0;
        for (let i = 0; i < breadcrumbItems.length; i++) {
          totalWidth += breadcrumbItems[i].offsetWidth + 58;

        }

        console.log(this.breadcrumbWidth);

        this.breadcrumbWidth = totalWidth;
        // 判断是否超出一行，若超出则提示是否删除所有面包屑
        if (this.breadcrumbWidth > this.containerWidth) {
          this.breadList.splice(1, 1);
          // this.showDeleteAllPrompt();
        }
      });
      const currentMatched = this.$route.matched.slice();
      const newRoutes = [];
      currentMatched.forEach((route) => {
        const existingRoute = this.breadList.find(
          (item) => item.name === route.name
        );
        if (!existingRoute) {
          newRoutes.push(route);
        }
      });
      this.breadList = this.breadList.concat(newRoutes);
      this.showDeleteIcon = this.breadList.map(() => false);

    },
    showDeleteAllPrompt() {
      this.$confirm('是否删除所有面包屑？', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {
        // 用户选择是，清空面包屑列表及对应图标显示数组
        this.breadList = [];
        this.showDeleteIcon = [];
      }).catch(() => {
        // 用户选择否，不做任何操作，可根据实际需求添加额外逻辑
        console.log('取消删除所有面包屑');
      });
    },

    removeBreadcrumb(index) {
      const routeToRemove = this.breadList[index];
      // 检查是否删除的是当前页面的面包屑
      if (this.$route.path === routeToRemove.path) {
        // 删除指定索引的面包屑记录
        this.breadList.splice(index, 1);
        // 同时删除对应的控制删除图标显示的数组元素
        this.showDeleteIcon.splice(index, 1);
        // 如果删除的是当前页面的面包屑，且面包屑列表不为空，跳转到面包屑列表中最后一个路由对应的页面
        if (this.breadList.length > 0) {
          const lastRoute = this.breadList[this.breadList.length - 1];
          this.$router.push(lastRoute.path);
        }
      } else {
        // 如果删除的不是当前页面的面包屑，只需执行删除操作
        this.breadList.splice(index, 1);
        this.showDeleteIcon.splice(index, 1);
      }
      this.updateBreadcrumb()
    },


    handleMouseEnter(index) {

    },
    handleMouseLeave(index) {
      this.$nextTick(() => {
        // this.showDeleteIcon[index] = false
        // 在这里可以执行一些依赖于DOM更新后的操作，目前示例中暂不需要额外操作
      });
      // 鼠标移出时，设置对应索引的删除图标隐藏
    },
    // 搜索
    ifsearch() {
      this.search = true
    },
  },
  watch: {
    $route(to, from) {
      // 每次路由发生变化时调用此方法来更新面包屑导航
      this.updateBreadcrumb();
    },
  },
  mounted() {
    // 获取面包屑容器宽度，可根据实际DOM结构和选择器进行调整
    const container = document.querySelector('.container_top');
    if (container) {
      this.containerWidth = container.offsetWidth;
    }
    console.log(container.offsetWidth);

    // 计算并更新面包屑总宽度
    this.updateBreadcrumb();

  },
};
</script>

<style lang="less" scoped>
/* //设置导航 */
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  // height: 800px;
  // min-height: 400px;
  overflow: hidden;
}
.el-menu--collapse {
  height: 100%;
}
.container {
  transition-duration: 0.1s;
  height: 100%;
  background-color: #edeff2;
}

/* 头部 */
.home_top {
  width: 100%;
  height: 59px;
  background-color: #1890ff;
  display: flex;
  justify-content: space-between;
}

/* 头部里边内容 */
.home_top_left {
  width: 155px;
  height: 58px;
  font-size: 18px;
  color: white;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 控制导航位置 */
.home_dh {
  position: absolute;
  top: -20px;
  left: 202px;
}

.dh_left {
  margin-left: -150px !important;
  margin-right: 50px;
  color: #ffffff;
}

.dh_right {
  margin-left: 0px !important;
  margin-right: 10px;
  color: #ffffff;
}

.img_right {
  transition: all 1s;
  margin-left: -80px;
}

/* 颜色 */
.collapsebut:hover {
  background-color: #5eb2ff !important;
}

/* 导航右侧内容 */
.context_right {
  float: right;
  margin-top: -390px;
  width: 100%;
  height: 500px;
  border: 5px solid red;
  background-color: #f0f2f5;
}

.el-header {
  background-color: #ffffff;
  color: #189eff;
  line-height: 60px;
}

/* 改变右侧区域宽度 */
// .aside_min {
//   // width: 65px !important;
//   height: 100;
// }

.aside_max {
  // width: 201px !important;
}

.context_container {
  background-color: #f0f2f5;
}

.container_top {
  width: 100%;
  display: flex;
  overflow: hidden;
  justify-content: space-between;
  height: 50px;
  background-color: white;
  border-bottom: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
}

.el-card__body,
.el-main {
  padding: 5px 3px;
}

// 头部右侧
.home_right {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-right: 30px;
}

// 搜索框
.home_search {
  width: 162px;
  height: 30px;
  margin: 0 12px;
  border-radius: 7px;
  border-bottom: 1px solid #Fff;
}

::v-deep .el-input__inner {
  background-color: #1890ff00;
  border: 0;
  color: #fff;
  height: 30px;
}

/* 欢迎管理员 */
.hy-gly {
  color: white;
  height: 18px;
  padding: 11px 25px;
  border-radius: 10px;
}

.hy-gly:hover {
  background-color: #5eb2ff;
}

.el-dropdown-link {
  cursor: pointer;
  color: white;
}

.el-dropdown {
  display: block;
}

/* 图标 */
.ccc {
  color: white;
  cursor: pointer;
  height: 18px;
  font-size: 14px;
  padding: 11px 13px;
  border-radius: 10px;
}

.ccc:hover {
  background-color: #5eb2ff;
}

.breadcrumb {
  font-size: 16px;
  margin-left: 20px;
  line-height: 50px;

  .el-breadcrumb__item {
    display: inline-block;
    height: 46px;
    text-align: center;
    margin: 0 15px;
    padding: 0px 10px;
    cursor: pointer !important;
  }
}

::v-deep .el-breadcrumb__inner {
  display: inline-block;
  text-align: center;
  font-weight: 400;
  font-size: 14px;
  color: black;
  position: relative;
  width: 100%;
}

.delete-icon {
  width: 0;
  float: right;
  visibility: hidden;
}

.yiru:hover .delete-icon {
  visibility: visible;
}

.current-breadcrumb {
  border-bottom: 3px solid #1890ff;

  ::v-deep .el-breadcrumb__inner {
    display: inline-block;
    text-align: center;
    font-weight: 400;
    font-size: 14px;
    position: relative;
    width: 100%;
    color: #1890ff !important;

  }

}

::v-deep .el-breadcrumb__item {
  float: none;
}

.el-breadcrumb__item:last-child .el-breadcrumb__inner,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
  font-weight: 400;
  color: black;
  cursor: pointer;
}

::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
  cursor: pointer;
  color: black;
}

::v-deep .el-breadcrumb__separator {
  margin: 0px;
  font-weight: 700;
  color: black;
}
::v-deep .el-aside {
  overflow: visible;
  box-sizing: border-box;
  flex-shrink: 0;
  background-color: white;
}
// .delete-icon:hover {
//     color: red;
//   }
</style>